<template>
	<van-checkbox-group 
		class="product-wrap"
		v-if="list"
		v-model="checkboxResult"
		ref="checkboxesGroup"
		@change="changeAll"
	>
		<ul>
			<li 
				class="list-warp van-hairline--top"
				v-for="(item, index) in list " 
				:key="index"
			>
				<van-row type="flex" justify="space-between">
					<van-col 
						span="2" 
						v-if="from" 
						v-show="editItem"
						class="relative"
					>
					<!-- 这个在收藏列表的时候展示 -->
						<van-checkbox 
							:name="item.id" 
							ref="checkboxes"
							@click="$refs.checkboxes[index].toggle()"
						/>
					</van-col>
					<van-col span="8">
						<div class="cover-wrap" @click="gopage(index)">
							<img :src="item.img" v-lazy="item.img">
							<p class="cover-tag" v-if="item.kind_name">{{item.kind_name}}</p>
						</div>
					</van-col>
					<van-col :span="editItem ? 14 : 16" class="item-info" :class="item.is_release == 0 && 'c-gray'">
							<div @click="gopage(index)">
								<p class="name van-multi-ellipsis--l2">{{item.name}}</p>
								<p class="text">
									<span>{{item.zone_name}}</span>
									<i v-if="item.sales >= 0 && item.zone_name">|</i>
									<span v-if="item.sales >= 0">已售<em>{{item.sales}}</em></span>
								</p>
							</div>
							<div class="footer clearfix" v-if="item.is_release == 1">
								<p class="pull-left" @click="gopage(index)">
									<span class="price" v-if="item.lowest_price != null">￥<em>{{item.lowest_price}}</em>起</span>
									<del v-if="item.origin_price">￥{{item.origin_price}}</del>
								</p>
								<p class="pull-right btn" v-if="!from">
									<van-button 
										size="small" 
										type="buy" 
										@click="booking(item.id, (item.is_release == 0 || !item.skus))"
										:class="(item.is_release == 0 || !item.skus) ? 'disabled' : ''"
									>立即采购</van-button>
								</p>
							</div>
							<div class="footer clearfix" v-else>
								<van-tag class="font-xs">失效</van-tag>
							</div>
					</van-col>
			</van-row>
			</li>
		</ul>
	</van-checkbox-group>
</template>
<script>
import {
    CheckboxGroup,
    Checkbox,
    Button,
    Row,
		Col,
		Tag
} from 'vant';
export default {
    name: 'prod-item',
    components: {
			[CheckboxGroup.name]: CheckboxGroup,
			[Checkbox.name]: Checkbox,
			[Button.name]: Button,
			[Row.name]: Row,
			[Col.name]: Col,
			[Tag.name]: Tag,
    },
		props: {
			list: Array,
			from: String,
			checkAll: {
				type: Boolean,
				default: false
			},
			editItem: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				checkboxResult: []
			}
		},
		watch: {
			checkAll(nw) {
				this.$refs.checkboxesGroup.toggleAll(nw)
			}
		},
    methods: {
			changeAll() {
				this.$emit('changeAll', this.checkboxResult.length == this.list.length)
			},
			gopage (index) {
				if(this.editItem)return
				const item = this.list[index]
				this.$goPage('product/detail', {
						id: item.id
				})
			},
			booking(id, disabled) {
				if(!disabled){
					this.$goPage('booking', {product_id: id})
				}
			}
    }
}
</script>
<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
.product-wrap{
    padding:0 @font-size-lg @font-size-lg @font-size-lg;
    background-color:@white; 
    .list-warp{
        padding:15px 0 15px;
        min-height:70px;
        float: inherit;
        &:first-child{
					&::after{
						display:none;
					}
				}
				.van-checkbox {
					position: absolute;
					top: 50%;
					transform: translateY(-50%)
				}
        .cover-wrap{
					position: relative;
					width:105px;
					height:70px;
					border-radius:@radius-default;
					img{
						width:100%;
						height:100%;
						border-radius:@radius-default;
					}
					.cover-tag{
						top:0;
						left:0;
						color:@white;
						line-height: 1;
						padding: 3px 5px;
						position:absolute;
						border-radius:5px 0 5px 0;
						font-size: @font-size-xs;
						background-color:rgba(0,0,0,0.4);
					}
				}
				.item-info {
					margin-top: -5px;
				}
        .name{
					color:@black;
					font-size:@font-size-md;
        }
        .text{
					color: @gray-9;
					font-size: @font-size-xs;
					i {
						padding:5px;
						line-height: 1;
					}
					span{
						padding:5px 0;
						em{
							margin-left:2px;
						}
					}
        }
        .footer{
            font-size: @font-size-xs;
            .price{
                color:@color-buy;
                em{
                    font-size:18px;
                    margin:0 2px;
                }
            }
            del{
                    color: @gray-9;
                    margin-left:5px;
            }
            .btn{
								margin-top:-6px;
								.disabled {
									background-color: @gray-9;
									border-color: @gray-9;
									background-image: none !important;
								}
						}
						.van-tag {
							padding: 2px 3px;
							line-height: 1;
						}
        }
    }

}
</style>